<!-- 蓝色登录页面2 -->
<template>
  <view class="wrapper">
    <view class="img-a">
      <view class="logo">
        智慧考勤
      </view>
      <image class="bg" src="../../static/login/bg.png" mode="widthFix"></image>
    </view>
    <view class="form">
      <view class="title">
        Hi~
      </view>
      <view class="item">
        <image src="../../static/login/username.png" class="img"></image>
        <input name="phone" placeholder="请输入您的用户名" class="input"  v-model="phone" />
      </view>
      <view class="item">
        <image src="../../static/login/password.png" class="img"></image>
        <input type="password" name="code"  class="input"  placeholder="请输入您的密码" v-model="pwd" />
      </view>
      <button type="primary" class="btn" @tap="login">登 录</button>
    </view>
  </view>
</template>
<script>
  import {
    md5
  } from 'js-md5';
  import {
    LOCAL_PASSWORD,
    LOCAL_PHONE
  } from '../../constants/constants';
  import {
    setUserInfo
  } from '../../utils';
  import {
    login,getInfo
  } from '../../utils/api';

  export default {
    data() {
      return {
        phone: '', //手机号码
        pwd: '' //密码
      };
    },
    onLoad() {
      const phone = uni.getStorageSync(LOCAL_PHONE)
      if (phone) {
        this.phone = phone
      }
      const pwd = uni.getStorageSync(LOCAL_PASSWORD)
      if (pwd) {
        this.pwd = pwd
      }
      if (phone && pwd) {
        this.login()
      }
    },
    methods: {
      //当前登录按钮操作
      async login() {
        if (!this.phone) {
          uni.showToast({
            title: '请输入用户名',
            icon: 'none'
          });
          return;
        }
        if (!this.pwd) {
          uni.showToast({
            title: '请输入您的密码',
            icon: 'none'
          });
          return;
        }
        // fetch
        let res = await login({
          username: this.phone,
          password: md5(this.pwd)
        })
        if (res.roleId != 3) {
          return uni.showToast({
            title: '非员工无法登陆',
            icon: 'none'
          })
        }
        setUserInfo(res)
        res = await getInfo()
        if (res) {
          setUserInfo(res)
          uni.setStorageSync(LOCAL_PASSWORD, this.pwd)
          uni.setStorageSync(LOCAL_PHONE, this.phone)

          if(this.phone === this.pwd) {
            uni.showModal({
              title: '提示',
              content: '用户名密码一样，请尽快去个人中心修改密码',
              showCancel: false,
              success() {
                uni.switchTab({
                  url: '/pages/index/index'
                })
              }
            })
          } else {
            uni.switchTab({
              url: '/pages/index/index'
            })
          }
        }
      },
    }
  };
</script>
<style lang="scss">
page {
  overflow: hidden;
  background-color: #eee;
}
.wrapper {
  height: 100%;
}
.img-a {
  position: relative;
}
.logo {
  position: absolute;
  z-index: 10;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  width: 200rpx;
  height: 200rpx;
  border-radius: 50%;
  overflow: hidden;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36rpx;
}
.bg {
  width: 100%;
}

.form {
  width: 90%;
  margin: 0 auto;
  border-radius: 100rpx;
  overflow: hidden;
  background-color: #fff;
  margin-top: -240rpx;
  position: relative;
  z-index: 20;
  padding: 24rpx 56rpx 104rpx;
}
.title {
  font-weight: 700;
  text-align: center;
  font-size: 60rpx;
  margin-bottom: 50rpx;
}

.item {
  display: flex;
  gap: 24rpx;
  align-items: center;
  border-bottom: 1px solid #eee;
  padding-bottom: 12rpx;
  & +.item {
    margin-top: 56rpx;
  }
}
.img {
  width: 36rpx;
  height: 36rpx;
}
.input {
  flex: 1;
}

.btn {
  margin-top: 72rpx;
  border-radius: 200rpx;
}
</style>